<template>
  <div class="label">
    <!-- <h1>标签</h1> -->
    <div class="topic">
      <!-- <div class="ulbox">
        <router-link to="/label">
          <li>题材</li>
        </router-link>
        <router-link to="/label/groupstyle">
          <li>风格</li>
        </router-link>
        <router-link to="/label/groupequipment">
          <li>设备</li>
        </router-link>
        <router-link to="/label/groupregion">
          <li>地区</li>
        </router-link>
      </div> -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="题材" name="label">
          <!-- 题材 -->
        </el-tab-pane>
        <el-tab-pane label="风格" name="groupstyle">
          <!-- 风格 -->
        </el-tab-pane>
        <el-tab-pane label="设备" name="groupequipment"></el-tab-pane>
        <!-- 设备 -->
        <el-tab-pane label="地区" name="groupregion"></el-tab-pane>
        <!-- 地区 -->
      </el-tabs>
    </div>
    <!-- <router-view></router-view> -->
    <div class="contentBox" v-loading='loading' v-if="data && style ">
      <!-- 内容 -->
      <div class="itemBox" v-for="(item,index) in data[style]" :key="index">
        <div class="imgBox displayBox"
          @click="toMoreDetail(style!='设备'?item[0].label_type : item[0].phone)">
          <div class="leftImgBox">
            <img :src="item[0]?item[0].img:''" class="leftImg borderStyle" alt="">
          </div>
          <div class="rightImg">
            <div class="topImgBox">
              <img :src="item.length-1>0?item[1].img :''" class="topImg borderStyle" alt="">
            </div>
            <div class="btnImgBox">
              <img :src="item.length-1>1?item[2].img:''" class="btnImg borderStyle" alt="">
            </div>
          </div>
        </div>
        <!-- 分类 -->
        <div class="className">{{style!='设备'?item[0].label_type : item[0].phone}}</div>
      </div>
    </div>
    <div v-else class="noData">暂无数据</div>
  </div>
  </div>
</template>

<script>
export default {
  components: {
    // Nav: () => import('../../components/Nav.vue')
  },
  props: {},
  data() {
    return {
      loading: false,
      activeName: 'label',
      data: null,
      label: {
        '题材': ['无人机', '旅行'],
        '风格': ['HDR'],
        '设备': ['DJI Mavic 3', 'DJI Air 2S', 'Mavic 2 Pro', 'Mavic Air 2', 'Spark'],
        '地区': ['西藏']
      },
      style: null,
      tab: '题材',
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick(tab, event) {
      this.tab = tab.label;
      this.getDataFun(tab.label);
    },
    getDataFun(labelName) {
      this.loading = true;
      let dataArr = [];
      let style = labelName ? labelName : '题材';
      this.style = style;
      let label_type = this.label[style];
      let params = {
        style,
      };
      label_type.forEach((el, index) => {
        let params = {
          style,
          label_type: el
        };
        this.$axios.post('/api/labelData', params).then((res) => {
          let { data } = res;
          dataArr.push(data)
          if (index == label_type.length - 1) {
            // if (style == '设备') {
            // }
            let obj = {};
            obj[style] = dataArr
            this.data = obj;
            this.loading = false;
          }
        })
      });
    },
    // 更多
    toMoreDetail(key) {
      this.$router.push({ path: '/moreDetail', query: { key, style: this.style == '设备' ? this.style : null } })
    },
  },
  created() { },
  mounted() {
    window.scrollTo(0, 0);
    this.getDataFun();
  }
};
</script>
<style scoped lang='scss'>
.topic {
  /* position: fixed; */
  top: 3rem;
  left: 0;
  right: 0;
  z-index: 99;
  height: 50px;
  background-color: #fff;
  /* box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%); */
}
.topic .ulbox {
  position: relative;
  width: 1200px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 50px;
}
.topic .ulbox li {
  height: 3rem;
  box-sizing: border-box;
  margin: 0 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 0.15rem solid transparent;
  border-top: 0.15rem solid transparent;
}
.topic ::v-deep .el-tabs__nav-scroll {
  width: 300px;
  margin: 0 auto;
}
.contentBox {
  width: 1225px;
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  flex-direction: row;
}
.itemBox {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 390px;
  height: 280px;
  padding: 13px;
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-right: 17px;
  .displayBox {
    display: flex;
  }
  .leftImg {
    width: 208px;
    height: 208px;
  }
  .leftImg:hover {
    // width: 213px;
    // height: 213px;
    transform: scale(1.5, 1.5);
  }
  .leftImgBox {
    width: 208px;
    height: 208px;
  }
  .topImg,
  .btnImg {
    width: 145px;
    height: 102px;
  }
  .borderStyle {
    border-radius: 2px;
  }
  .topImg:hover,
  .btnImg:hover {
    // width: 150px;
    // height: 107px;
    transform: scale(1.5, 1.5);
  }
  .topImgBox {
    margin-bottom: 2px;
  }
  .topImgBox,
  .btnImgBox {
    width: 145px;
    height: 102px;
  }
  .topImgBox,
  .btnImgBox,
  .leftImgBox {
    overflow: hidden;
  }
  .leftImgBox {
    margin-right: 10px;
  }
  .marginRight {
    margin-left: 20px;
    border: 1px solid red;
  }
  .className {
    line-height: 60px;
    font-size: 20px;
    font-weight: bold;
  }
}
</style>